<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="关键字" prop="keyword">
            <Input
              type="text"
              v-model="searchForm.keyword"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
            />
          </Form-item>

          <Form-item label="手机号" prop="phoneNumber">
            <Input
              type="text"
              v-model="searchForm.phoneNumber"
              placeholder="请输入手机号"
              :maxlength="11"
              clearable
              style="width: 200px"
            />
          </Form-item>

          <Form-item label="审核状态" prop="qualification">
            <Select
              v-model="searchForm.qualification"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option v-for="(item, k) in statusList" :key="k" :value="item.value">{{
                item.label
              }}</Option>
            </Select>
          </Form-item>

          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>

    <!-- 查看模态框 -->
    <Modal v-model="detailFlag" title="查看" :footer-hide="true">
      <div v-if="detailFlag" class="modal-info">
        <p>基本信息</p>
        <div class="modal-row">
          <div>姓名：</div>
          <div>{{ detailRow.realName }}</div>
        </div>
        <div class="modal-row">
          <div>手机号：</div>
          <div>{{ detailRow.mobile }}</div>
        </div>
        <div class="modal-row">
          <div>身份证：</div>
          <div>{{ detailRow.idCard }}</div>
        </div>
        <p>个人材料</p>
        <div class="modal-row2">
          <div>擅长领域：</div>
          <div>{{ detailRow.domain }}</div>
        </div>
        <div class="modal-row2">
          <div>个人简介：</div>
          <div>{{ detailRow.introduction }}</div>
        </div>
        <div class="modal-row2">
          <div>胸牌/执业证/资格证/职称证：</div>
          <div><img v-for="(item, k) in detailRow.imgList" :key="k" :src="item" /></div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Person from "@/api/person.js";

export default {
  name: "member",
  data() {
    return {
      loading: false, // 加载状态
      detailFlag: false, // 详情弹窗
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        keyword: "", //关键字
        phoneNumber: "", //手机号
        qualification: "", //审核状态
      },
      statusList: [
        // 审核状态列表
        { value: 0, label: "未审核" },
        { value: 1, label: "已通过" },
        { value: 2, label: "已拒绝" },
        { value: 4, label: "审核中" },
      ],
      columns: [
        { title: "姓名", key: "realName", width: 120, tooltip: true },
        { title: "手机号", key: "mobile", width: 120, tooltip: true },
        { title: "身份证号", key: "idCard", width: 180, tooltip: true },
        {
          title: "擅长领域",
          key: "domain",
          minWidth: 300,
          tooltip: true,
        },
        {
          title: "个人简介",
          key: "introduction",
          minWidth: 300,
          tooltip: true,
        },
        {
          title: "审核状态",
          minWidth: 120,
          render: (h, params) => {
            let label = "未审核";
            let color = "#FF5C58";
            if (params.row.qualification == 1) {
              label = "已通过";
              color = "#68CABE";
            } else if (params.row.qualification == 2) {
              label = "已拒绝";
              color = "#FA6419";
            } else if (params.row.qualification == 4) {
              label = "审核中";
              color = "#FB8347";
            }
            return h("div", [
              h("div", {
                style: {
                  display: "inline-block",
                  width: "8px",
                  height: "8px",
                  backgroundColor: color,
                  marginRight: "6px",
                  borderRadius: "50%",
                },
              }),
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "状态",
          minWidth: 120,
          render: (h, params) => {
            let label = "--";
            let color = "#d3d3d3";
            if (params.row.isOnline == 1) {
              label = "已上架";
              color = "#68CABE";
            }
            if (params.row.isOnline == 2) {
              label = "已下架";
              color = "#ff5c58";
            }
            return h("div", [
              h("div", {
                style: {
                  display: "inline-block",
                  width: "8px",
                  height: "8px",
                  backgroundColor: color,
                  marginRight: "6px",
                  borderRadius: "50%",
                },
              }),
              h("span", {}, label),
            ]);
          },
        },
        { title: "申请时间", key: "createTime", minWidth: 180, tooltip: true },
        {
          title: "操作",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            let func = [];
            if (params.row.qualification == 4) {
              func.push(this.btnDom(h, "success", "通过", "submit", params));
              func.push(this.btnDom(h, "error", "拒绝", "submit", params));
            }
            if (params.row.qualification == 1) {
              if (params.row.isOnline == 1) {
                func.push(this.btnDom(h, "error", "下架", "handlePut", params));
              } else {
                func.push(this.btnDom(h, "warning", "上架", "handlePut", params));
              }
            }
            func.push(this.btnDom(h, null, "查看", "handleView", params));
            return h(
              "div",
              { style: { display: "flex", justifyContent: "center" } },
              func
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      detailRow: {}, //查看数据
    };
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row, label);
            },
          },
        },
        label
      );
    },
    // 提交审核
    submit(v, label) {
      let params = {
        expertId: v.id,
        qualification: label == "通过" ? 1 : 2,
      };
      this.$Modal.confirm({
        title: "确认" + label,
        content: "<p>您确认要审核" + label + "？</p>",
        onOk: () => {
          API_Person.postExpertExamine(params).then((res) => {
            if (res.success) {
              this.$Message.success("已" + label);
              this.getData();
            }
          });
        },
      });
    },
    // 专家上架/下架
    handlePut(v, label) {
      this.$Modal.confirm({
        title: "确认" + label,
        content: "<p>您确认要" + label + "该专家吗？</p>",
        onOk: () => {
          let formdata = new FormData();
          formdata.append("expertId", v.id);
          formdata.append("isOnline", v.isOnline == 1 ? 2 : 1);
          API_Person.postExpertPut(formdata).then((res) => {
            if (res.success) {
              this.$Message.success("专家已" + label);
              this.getData();
            }
          });
        },
      });
    },
    // 查看
    handleView(v) {
      v.imgList = v.credentials ? v.credentials.split(",") : [];
      this.detailRow = Object.assign({}, v);
      this.detailFlag = true;
    },
    //查询专家列表
    getData() {
      this.loading = true;
      let status = this.searchForm.qualification;
      if (!status && status != 0) this.searchForm.qualification = "";
      API_Person.postExpertPage(this.searchForm)
        .then((res) => {
          if (res.success) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.modal-info {
  p::before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 14px;
    vertical-align: top;
    border-radius: 2px;
    margin-right: 20px;
    background-color: #1989fa;
  }
  .modal-row {
    display: flex;
    line-height: 35px;
    padding: 0 20px;
    > div:first-child {
      width: 60px;
      color: #777777;
    }
    > div:last-child {
      flex: 1;
      word-break: break-all;
    }
  }
  .modal-row2 {
    line-height: 35px;
    padding: 0 20px;
    > div:first-child {
      width: 160px;
      color: #777777;
    }
    > div:last-child {
      word-break: break-all;
    }
    img {
      height: 150px;
    }
  }
}
</style>
